<template>
  <div class="box">
    <div class="f1">
      <div class="title">业务介绍</div>
      <div class="title_en">BUSINESS BRIEF</div>
      <div class="icon_bg"></div>
      <div class="text">
        <p>
          万达宝贝王是国内首屈一指的连锁儿童室内乐园，至2018年200+门店，预计2019年底将达300+。依托万达集团，宝贝王乐园以儿童室内乐园及早教为发展平台，服务全国千万亲子家庭。立足于万达广场，遍及全国1-4线城市，平均门店面积达1500+平米，以游乐设备、主题活动、体验式零售为主要业态，今年平台规模迅速扩张。零售招商接受多种模式，并可为商家量身定制运营服务，宝贝王乐园将成为您的零售渠道中更轻松，更省心的优质平台。根据商品属性、价格带、功能特色等，整合O2O资源全方位推广，打造爆款产品，宝贝王乐园将会成为您一直寻找的强力爆品孵化平台。
        </p>
      </div>
    </div>
    <div class="f2">
      <div class="title">合作条件</div>
      <div class="title_en">JOINING CONDITIONS</div>
      <div class="icon_bg"></div>
      <div class="main">
        <img src="../assets/img/join_1.png" />
        <div class="item1">
          <span>认可万达企业文化，严格履行加盟合作条款</span>
        </div>
        <img src="../assets/img/join_2.png" />
        <div class="item2">
          <span>具有追求卓越的精神，成功的商业经营经验，良好的企业管理资历，有能力经营管理儿童乐园，或委托万达做托管经营</span>
        </div>
        <img src="../assets/img/join_3.png" />
        <div class="item3">
          <span>遵纪守法，热爱儿童，对儿童业态有一定的了解和认识，有志于中国儿童产业发展，具有一定实力的企业法人或自然人，个人投资能力在千万级</span>
        </div>
        <img src="../assets/img/join_4.png" />
        <div class="item4">
          <span>良好的商业信誉，没有犯罪或破产记录，具备忠诚正直的品德操守</span>
        </div>
        <img src="../assets/img/join_5.png" />
        <div class="item5">
          <span>在当地可以拿到合适的场地，并在地方上拥有各类资源（如教育、工商、消防、政府等）</span>
        </div>
      </div>
      <img src="../assets/img/bg01.png" />
    </div>
    <div class="f3">
      <div class="title">产业布局</div>
      <div class="title_en">INDUSTRY LAYOUT</div>
      <div class="icon_bg"></div>
      <div class="container">
        <img src="../assets/img/q_pic14.png" />
        <div class="q_pics q_pic11">
          <div class="txtbox">
            <span>自主全版权内容</span>
            <span>超级ip通过授权方式渗透到儿童产业链所有板…</span>
          </div>
        </div>
        <div class="q_pics q_pic12">
          <div class="txtbox">
            <span>实体产业矩阵</span>
            <span>宝贝王、早教中心 零售集合店</span>
          </div>
        </div>
        <div class="q_pics q_pic13">
          <div class="txtbox">
            <span>文化产业矩阵</span>
            <span>动画电影、动画片 舞台剧出版物</span>
          </div>
        </div>
      </div>
    </div>
    <div class="f4">
      <div class="title">合作流程</div>
      <div class="title_en">COOPERATION PROCESS</div>
      <div class="icon_bg"></div>
      <div class="container">
        <div class="technological">
          <div class="bottom">
            <div class="imgtxt">
              <img src="../assets/img/q_icon4.png" />
              <span>提交合作申请表</span>
            </div>
          </div>
          <div class="top">
            <div class="imgtxt">
              <img src="../assets/img/q_icon5.png" />
              <span>资质审核</span>
            </div>
          </div>
          <div class="bottom">
            <div class="imgtxt">
              <img src="../assets/img/q_icon6.png" />
              <span>设计环节</span>
            </div>
          </div>
          <div class="top">
            <div class="imgtxt">
              <img src="../assets/img/q_icon7.png" />
              <span>开业培训运营培训</span>
            </div>
          </div>
          <div class="bottom">
            <div class="imgtxt">
              <img src="../assets/img/q_icon8.png" />
              <span>咨询</span>
            </div>
          </div>
          <div class="top">
            <div class="imgtxt">
              <img src="../assets/img/q_icon9.png" />
              <span>参考观察</span>
            </div>
          </div>
          <div class="bottom">
            <div class="imgtxt">
              <img src="../assets/img/q_icon10.png" />
              <span>签订合同</span>
            </div>
          </div>
          <div class="top">
            <div class="imgtxt">
              <img src="../assets/img/q_icon11.png" />
              <span>乐园交付建设</span>
            </div>
          </div>
        </div>
        <div class="q_state">
          <div>
            <div>
              <img src="../assets/img/q_icon13.png" />
              <span>开业前</span>
            </div>
            <p>投资评估，品牌支持，协助选址，确定平面设计方案等</p>
          </div>
          <div>
            <div>
              <img src="../assets/img/q_icon13.png" />
              <span>开业中</span>
            </div>
            <p>万达筹建管控系统乐园整体设计规划，施工装修，设备采购及调试等</p>
          </div>
          <div>
            <div>
              <img src="../assets/img/q_icon13.png" />
              <span>开业后</span>
            </div>
            <p>总部品牌宣传广告助力，品质监察，设备更新全国联动推广活动安全保障等</p>
          </div>
          <div>
            <div>
              <img src="../assets/img/q_icon13.png" />
              <span>乐园托管服务</span>
            </div>
            <p>为加盟店提供特色托管服务托管周期5年</p>
          </div>
        </div>
      </div>
      <img src="../assets/img/bg01.png" />
    </div>
    <div class="f5">
      <div class="q_contact">
        <div class="txtBox">
          <span>CONTACT US</span>
          <span>联系人：杨丽亚</span>
          <div>
            <span>邮箱：</span>
            <span>bbwtuozhanbu@wanda.com.cn</span>
          </div>
          <span>发送邮件</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.box {
  background-image: url("../assets/img/bg02.png");
  background-size: 1536px 100px;
}
.title {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  color: #333;
}
.title_en {
  font-size: 16px;
  color: #f0cb7a;
  line-height: 30px;
  text-align: center;
}
.f1 {
  margin-top: 60px;
  .icon_bg {
    margin-bottom: 36px;
    padding-bottom: 16px;
    background: url("../assets/img/icon43.png") no-repeat bottom center;
  }
  .text {
    width: 1170px;
    margin: 0 auto;
    p {
      margin-top: 60px;
      font-size: 20px;
      color: #333;
      line-height: 40px;
      text-align: left;
      text-indent: 2em;
    }
  }
}
.f2 {
  margin-top: 50px;
  padding-top: 40px;
  background-color: #d6f5fa;
  .icon_bg {
    margin-bottom: 60px;
    padding-bottom: 16px;
    background: url("../assets/img/icon44.png") no-repeat bottom center;
  }
  .main {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    > img {
      width: 220px;
      height: 220px;
    }
    > div {
      box-sizing: border-box;
      width: 220px;
      height: 220px;
      position: relative;
      background-color: #fff;
      > span {
        display: inline-block;
        width: 190px;
        height: auto;
        max-height: 190px;
        overflow: hidden;
        font-size: 16px;
        color: #333;
        line-height: 32px;
        text-align: left;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &.item1 {
        border-top: 10px solid #ffa11b;
      }
      &.item2 {
        border-top: 10px solid #a7c31b;
      }
      &.item3 {
        border-bottom: 10px solid #0e6bc1;
      }
      &.item4 {
        border-bottom: 10px solid #59daff;
      }
      &.item5 {
        border-bottom: 10px solid #de1b62;
      }
    }
  }
  > img {
    margin-top: 50px;
  }
}
.f3 {
  margin-top: 60px;
  .icon_bg {
    margin-bottom: 60px;
    padding-bottom: 16px;
    background: url("../assets/img/icon47.png") no-repeat bottom center;
  }
  .container {
    width: 1170px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 30px 0 350px 0;
    .q_pic11 {
      width: 549px;
      height: 560px;
      background-image: url("../assets/img/q_pic11.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: -60px;
      transition: all 0.8s;
      &:hover {
        transform: translateY(-20px);
      }
      .txtbox {
        width: 246px;
        position: absolute;
        top: 240px;
        left: 110px;
        display: flex;
        flex-direction: column;
        span {
          &:first-child {
            font-size: 26px;
            color: white;
            line-height: 40px;
            text-align: center;
          }
          &:last-child {
            font-size: 20px;
            color: white;
            line-height: 30px;
            text-align: center;
            opacity: 0.8;
          }
        }
      }
    }
    .q_pic12 {
      width: 337px;
      height: 331px;
      background-image: url("../assets/img/q_pic12.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: -130px;
      left: 760px;
      transition: all 0.8s;
      &:hover {
        transform: translateY(-20px);
      }
      .txtbox {
        width: 170px;
        position: absolute;
        top: 200px;
        left: 120px;
        display: flex;
        flex-direction: column;
        span {
          &:first-child {
            font-size: 26px;
            color: white;
            line-height: 40px;
            text-align: center;
          }
          &:last-child {
            font-size: 20px;
            color: white;
            line-height: 30px;
            text-align: center;
            opacity: 0.8;
          }
        }
      }
    }
    .q_pic13 {
      width: 359px;
      height: 377px;
      background-image: url("../assets/img/q_pic13.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 210px;
      left: 670px;
      transition: all 0.8s;
      &:hover {
        transform: translateY(-20px);
      }
      .txtbox {
        width: 170px;
        position: absolute;
        top: 230px;
        left: 80px;
        display: flex;
        flex-direction: column;
        span {
          &:first-child {
            font-size: 26px;
            color: white;
            line-height: 40px;
            text-align: center;
          }
          &:last-child {
            font-size: 20px;
            color: white;
            line-height: 30px;
            text-align: center;
            opacity: 0.8;
          }
        }
      }
    }
  }
  .txtbox {
    transition: all 0.8s;
    &:hover {
      transform: translateY(-20px);
    }
  }
}
.f4 {
  background-color: #f7faea;
  padding-top: 50px;
  .icon_bg {
    margin-bottom: 40px;
    padding-bottom: 16px;
    background: url("../assets/img/icon48.png") no-repeat bottom center;
  }
  .container {
    padding-top: 160px;
    height: 770px;
  }
  .technological {
    width: 1050px;
    margin: 0 auto;
    border-top: 2px dashed #fd7788;
    position: relative;
    margin-bottom: 80px;
    display: flex;
    &::after {
      content: "";
      border: 10px solid transparent;
      border-left-color: #fd7788;
      position: absolute;
      right: -20px;
      top: -10px;
    }
    .bottom {
      width: 130px;
      height: 178px;
      background-image: url("../assets/img/q_bg2.png");
      background-position: center center;
      background-repeat: no-repeat;
      top: -15px;
      position: relative;
      padding-top: 70px;
      box-sizing: border-box;
      text-align: center;
      .imgtxt {
        transition: all 0.8s;
        &:hover {
          transform: translateY(8px);
        }
      }
      span {
        display: block;
        width: 80px;
        height: 40px;
        font-size: 18px;
        color: #fff;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
      }
    }
    .top {
      width: 130px;
      height: 178px;
      background-image: url("../assets/img/q_bg1.png");
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;
      padding-top: 20px;
      box-sizing: border-box;
      top: -168px;
      text-align: center;
      .imgtxt {
        transition: all 0.8s;
        &:hover {
          transform: translateY(-8px);
        }
      }
      span {
        display: block;
        width: 80px;
        height: 40px;
        font-size: 18px;
        color: #fff;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
      }
    }
  }
  .q_state {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    > div {
      position: relative;
      transition: all 0.4s;
      &:hover {
        transform: translateY(-20px);
      }
      > div {
        min-width: 160px;
        text-align: center;
        position: absolute;
        top: 45px;
        left: 50%;
        transform: translateX(-50%);
        span {
          margin-top: 10px;
          display: block;
          font-size: 22px;
          color: #fff;
          line-height: 24px;
          text-align: center;
        }
      }
      > p {
        width: 180px;
        font-size: 16px;
        color: #3c3c3c;
        line-height: 36px;
        text-align: justify;
        text-indent: 2em;
        position: absolute;
        top: 190px;
        left: 50%;
        transform: translateX(-50%);
      }
      &:nth-child(1) {
        width: 232px;
        height: 452px;
        background-image: url("../assets/img/q_bg3.png");
        background-position: center center;
        background-repeat: no-repeat;
      }
      &:nth-child(2) {
        width: 232px;
        height: 452px;
        background-image: url("../assets/img/q_bg4.png");
        background-position: center center;
        background-repeat: no-repeat;
      }
      &:nth-child(3) {
        width: 232px;
        height: 452px;
        background-image: url("../assets/img/q_bg5.png");
        background-position: center center;
        background-repeat: no-repeat;
      }
      &:nth-child(4) {
        width: 232px;
        height: 452px;
        background-image: url("../assets/img/q_bg6.png");
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }
}
.f5 {
  margin-bottom: 80px;
  .q_contact {
    margin: 0 auto;
    width: 936px;
    height: 458px;
    background-image: url("../assets/img/q_bg7.png");
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    .txtBox {
      width: 305px;
      position: absolute;
      top: 200px;
      left: 54%;
      transform: translateX(-50%);
      font-size: 24px;
      > span {
        line-height: 36px;
        &:first-child {
          font-size: 46px;
          color: #fb9acb;
          line-height: 50px;
          text-align: left;
        }
      }
      div {
        height: 72px;
        overflow: hidden;
        display: flex;
        align-items: start;
        span {
          line-height: 36px;
          &:last-child {
            max-width: 220px;
            display: inline-block;
            font-size: 24px;
            color: #3c3c3c;
            text-align: left;
            word-wrap: break-word;
          }
        }
      }
    }
  }
}
</style>
